<template>
  <div class="content">
    <div class="flex flex-horizontal-end">
      <Button type="primary"> <a
        href="https://images.tospurfang.com/doc/%E4%BD%A3%E9%87%91%E8%A7%84%E5%88%99%E6%93%8D%E4%BD%9C%E6%8C%87%E5%BC%95.pdf"
        style="color:#fff;" target="_blank">查看操作指引</a>
      </Button>
    </div>

    <dt-grid ref="table" :columns="columns" page :onFetch='onFetch' empty-text="该案场尚未设置佣金规则，请先发起佣金规则审批" />
    
    <detail-modal ref='detail'></detail-modal>
  </div>
</template>

<script>
  import detailModal from '@/views/commission/rule/components/detail-modal.vue'
  import columnOpt from './opt/column.js'
  import ruleMgr from '@/biz/commission/rule.js'

  export default {
    components: {
      detailModal
    },
    data() {
      return {
        columns: [],
      }
    },
    mounted() {
      this.columns = columnOpt.options(this)
      this.$refs.table.init(this)
      this.$refs.table.fetch()
    },
    methods: {
      onDetail(row) {
        ruleMgr.detail(row.ruleId).then(res => {
          this.$refs.detail.show(res, 1)
        })
      },
      onFetch(data) {
        return ruleMgr.buildList(data)
      },
    },
  }
</script>

<style lang="scss" scoped>
  .content {
    padding: 20px;
  }
</style>
